<template>
    <div class="sys-org-container">
        <el-row>
            <div style="width: 100%;">

        <screening-Condition :inquireInfo="state.inquireInfo" @getChildren="getData">
            <el-button @click="handleClickAdd" type="primary">新增</el-button>
        </screening-Condition>
    </div>

        <div class="container" >
            <el-card class="table" shadow="hover">
                <!-- 列表展示 -->
                <el-table :data="state.tableData"  v-loading="state.loading" row-key="id"
					default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border
					highlight-current-row @current-change="handleRowChange" :header-cell-style="{
							background: 'var(--el-color-primary)',
							height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
						}"  :cell-style="{ padding: '2px' }" class="el-table" max-height="440">
                     <el-table-column type="index" label="序号" align="center"></el-table-column>
                     <el-table-column prop="materielLevelNum" label="等级编号" align="center" />
                    <el-table-column prop="materielLevelName" label="等级名称" align="center" />
                    <el-table-column prop="materielLevelDescription" label="等级描述" align="center" />
                    <el-table-column fixed="right" label="操作" width="120" align="center" >
                        <template #default="scope">
                            <el-button type="primary" text size="small" @click="handleClickEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="state.queryParams.page"
                    v-model:page-size="state.queryParams.pagesize" :page-sizes="[20, 30, 40, 50]"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :small="true" />

            </el-card>
        </div>
    </el-row>

        <el-drawer v-model="addDrawer" title="新增等级" size="30%">
            <el-form :model="ruleForm" ref="ruleFormRef" class="fl">

                <el-form-item label="等级名称" prop="materielLevelName"
                    :rules="[{ required: true, message: '等级名称不能为空', trigger: 'blur' }]">
                    <el-input v-model="ruleForm.materielLevelName" />
                </el-form-item>
                <el-form-item label="等级描述">
                    <el-input v-model="ruleForm.materielLevelDescription" />
                </el-form-item>
            </el-form>
            <div style="width: 100%; display: flex; justify-content: center; margin-top: 60px">
                <el-button @click="handleAddSubmit" type="primary" round
                    style="width: 80px; height: 30px">确认</el-button>
                <el-button @click="handleAddCancel" round style="width: 80px; height: 30px">取消</el-button>
            </div>
        </el-drawer>
        <el-drawer v-model="editDrawer" title="编辑等级" size="30%">
            <el-form :model="ruleForm2" class="fl" ref="ruleForm2Ref">
                <el-form-item label="等级编号">
                    <el-input v-model="ruleForm2.materielLevelNum" disabled />
                </el-form-item>
                <el-form-item label="等级名称" prop="materielLevelName"
                    :rules="[{ required: true, message: '等级名称不能为空', trigger: 'blur' }]">
                    <el-input v-model="ruleForm2.materielLevelName" />
                </el-form-item>
                <el-form-item label="等级描述">
                    <el-input v-model="ruleForm2.materielLevelDescription" />
                </el-form-item>
            </el-form>
            <div style="width: 100%; display: flex; justify-content: center; margin-top: 60px">
                <el-button @click="handleEditSubmit" type="primary" round
                    style="width: 80px; height: 30px">确认</el-button>
                <el-button @click="handleEditCancel" round style="width: 80px; height: 30px">取消</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue'
    import { TabsPaneContext, ElMessage } from 'element-plus'
    import { WmsApi } from "/@/api/wh";
    import screeningCondition from '/@/views/tools/screeningCondition.vue'
    const editDrawer = ref(false)
    const addDrawer = ref(false)
    const total = ref(0);
    const ruleFormRef = ref()
    const ruleForm2Ref = ref()
    const precondition = ref({})
    const ruleForm = ref({})
    const ruleForm2 = ref({})
    const state = reactive({
        //所有物料等级
        tableData: [],
        queryParams: {

            page: 0,
            pagesize: 20,
            materielLevelNum: undefined,
            materielLevelName: undefined

        },
        inquireInfo:
            [
                
                {
                    label: "等级名称",
                    value: "",
                    key: "MaterielLevelName",
                    options: [],
                    type: "input",
                }

            ]

    })
    onMounted(() => {
        getData(state.queryParams);
    })
    //处理子组件抛出的函数
    const getData = (info) => {
        //把用户输入的参数保存住
        precondition.value = info;

        console.log(info);
        //把用户输入的参数写入接口参数
        WmsApi().getAllClass({
            page: state.queryParams.page,
            pagesize: state.queryParams.pagesize,
            materielLevelNum: info.MaterielLevelNum,
            materielLevelName: info.MaterielLevelName
        }).then(
            res => {
                console.log(res);
                state.tableData = res.data.result.items;
                total.value = res.data.result.total
            }
        ).catch(
            err => {
                console.log(err);
            }
        )
    }
    const handleClickAdd = () => {
        addDrawer.value = true;
    }
    const handleEditCancel = () => {
        editDrawer.value = false;
        // getData(state.queryParams)
    }
    const handleAddCancel = () => {
        addDrawer.value = false;
        getData(state.queryParams)
    }
    // 编辑方法
    const handleClickEdit = (row) => {
        editDrawer.value = true;
     
        ruleForm2.value = Object.assign({},row)
       
    }
    //添加物料等级
    const handleAddSubmit = () => {
        //校验 不通过报红色提示
        ruleFormRef?.value.validate(async (valid) => {
            if (!valid) return;
            console.log(ruleForm.value);
            WmsApi().putNewClass(ruleForm.value).then(
                res => {
                    ElMessage.success('新增成功');
                    handleAddCancel();
                }
            )
        });
    }
    //高亮选中行
    const handleRowChange = (val) => {
		currentRow.value = val;
	}

    const handleEditSubmit = () => {

        ruleForm2Ref?.value.validate(async (valid) => {
            if (!valid) return;
            console.log(ruleForm2.value);
            WmsApi().modifyClass(ruleForm2.value).then(
                res => {
                    ElMessage.success('修改成功');
                    handleEditCancel();
                }
            )
        });
    }
    //当大小改变时触发,但是原先的搜索条件还是要
    const handleSizeChange = (val) => {
        console.log(val);
        state.queryParams.pagesize = val;
        console.log(state.queryParams);
        state.queryParams.materielLevelName = precondition.value.materielLevelName;
        state.queryParams.materielLevelNum = precondition.value.materielLevelNum;

        getData(state.queryParams)
    }
    //当页数改变时触发
    const handleCurrentChange = (val) => {
        state.queryParams.page = val;

        state.queryParams.materielLevelName = precondition.value.materielLevelName;
        state.queryParams.materielLevelNum = precondition.value.materielLevelNum;
        getData(state.queryParams)

    }
</script>
<style>
    /* .demo-tabs>.el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
    } */
    .center {
        margin: 40px auto;
        width: 50%;
        border: 1px solid #ddd;
        box-shadow:
            0 2px 10px #ddd
            /* 上阴影 */
            ,
            0 -2px 10px #ddd
            /* 下阴影 */
            ,
            2px 0 10px #ddd
            /* 左阴影 */
            ,
            -2px 0 10px #ddd
            /* 右阴影 */
        ;


    }

    /* 谷歌调试工具里找到对应的高度，重写属性值 */
    .el-tabs__item {
        font-weight: bold;
    }

    .el-tabs {
        --el-tabs-header-height: 100px;
    }

    .fl {
        /* // padding: 20px; */
        width: 60%;
        margin: 20px 80px;

    }

    
</style>